<template>
  <div class="page login">
    <div class="top lg">
      <span @click="$router.back()">
        <svg-icon icon-class="close" class="icon" />
      </span>
      <span>用户登录</span>
      <svg-icon icon-class="more" class="icon" />
    </div>
    <img class="logo" src="../../assets/images/logo.png" />
    <div class="form">
      <van-field v-model="form.phone" clearable placeholder="请输入账号">
        <img class="l-icon" slot="left-icon" src="../../assets/icon/user.png" />
      </van-field>
      <van-field
        v-model="form.pwd"
        clearable
        type="password"
        placeholder="请输入密码"
      >
        <img
          class="l-icon"
          slot="left-icon"
          src="../../assets/icon/password.png"
        />
      </van-field>
    </div>
    <div class="big-btn" @click="login">登 录</div>
    <div class="l-info">
      <div>
        <van-checkbox v-model="checked" checked-color="#eb7875"></van-checkbox>
        <em>我已同意</em>《软件许可服务协议》
      </div>
      <div>
        <router-link to="register">注册</router-link>
        <span>|</span>
        <router-link to="forget">忘记密码</router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        phone: "admin",
        pwd: "asdasd"
      },
      checked: false
    };
  },
  mounted() {
    history.pushState(null, null, document.URL);
    window.addEventListener("popstate", this.forbidBack);
  },
  destroyed() {
    window.removeEventListener("popstate", this.forbidBack);
  },
  methods: {
    login() {
      if (!this.form.phone) return this.$toast.fail("请输入账号");
      if (!this.form.pwd) return this.$toast.fail("请输入密码");
      if (!this.checked) return this.$toast.fail("请勾选用户协议");
      this.$toast.success("登录成功");
      this.$router.push({ name: "home" });
    },
    forbidBack(/* e */) {
      history.pushState(null, null, document.URL);
    }
  }
};
</script>
